<template>
  <div class="home">
    <div class="search" >
      <input type="text">
    </div>
    <div class="list">
     <div class="item" v-for="(item,index) in list" :key="index">
      <div class="img">
        <img :src="item.pic" alt="">
      </div>
      <div class="text">
        <div class="name">{{item.name}}</div>
        <div class="title">{{item.title}}</div>
      </div>
     </div>
    </div>
  <Tabbar></Tabbar>
  </div>
</template>

<script>
// @ is an alias to /src
import Tabbar from './Tabbar'
import axios from 'axios'
export default {
  data() {
    return {
      list:[]
    }
  },
  name: 'home',
  components: {
    Tabbar
  },
  mounted() {
    axios.get('/list').then(res=>{
      this.list=res.data.list
    })
  },
}
</script>
<style lang="scss">
.home{
  width: 100%;
    height: 667px;
  position: relative;
  .search{
    width: 100%;
    height: 50px;
      padding: 3px 20px;
display: flex;
    input{
      flex: 1;
    }
  }
    .tabbar{
      width: 100%;
      height: 40px;
      line-height: 40px;
      position: absolute;
      bottom: 0;
      left: 0;
      display: flex;
      background: #eee;
      a{
        flex: 1;
        text-align: center;
      }
    }
    .list{
      height: 580px;
      overflow: auto;
      .item{
        display: flex;
        padding: 20px;
        .img{
          width: 80px;
          height: 80px;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .text{
          width: 280px;
          padding:20px;
        }
      }
    }
}

</style>
